<div class="main-div">
  <div class="center-div">
    <div class="welcome">{{ name }}的面板</div>
    <!-- <div class="sub-title">让我们来愉快学习吧</div> -->
    <div class="options">
      <a (click)="setName()">请用其他方式称呼我👿</a>
      <a [routerLink]="['/workground']" routerLinkActive="active">练习练习🤚</a>
      <a [routerLink]="['/manage']" routerLinkActive="active">课程管理🐣</a>
    </div>
    <nz-list nzGrid class="cards">
      <div nz-row [nzGutter]="16">
        <div nz-col [nzXXl]="4" [nzXl]="6" [nzLg]="6" [nzMd]="8" [nzSm]="12" [nzXs]="24" *ngFor="let item of courses">
          <nz-list-item class="card">
            <nz-card nzHoverable (click)="navigate(item.url)" [nzTitle]="item.course.name" [ngClass]="item.progress.state">
              进度：{{item.maxLocation}}</nz-card>
          </nz-list-item>
        </div>
      </div>
    </nz-list>
    <div *ngIf="courses.length === 0">
      <span>没有看到课程？你可以在</span>
      <a [routerLink]="['/manage']" routerLinkActive="active">课程管理🐣</a>
      <span>界面<strong>导入内置课程</strong>或<strong>从文件导入课程</strong></span>
    </div>
  </div>
</div>
